<template>
  <div class="test">
    <!-- 图表 -->
    <div>
      <div class="title">
        <div class="left">
          <i class="el-icon-document-copy"></i>
          <span>辅助设备</span>
        </div>
        <el-button class="back"></el-button>
      </div>
      <div class="fcharts">
        <v-chart :auto-resize="true" :options="newOption"></v-chart>
      </div>
    </div>
    <!-- 查询 -->
    <el-form class="form">
      <el-row :gutter="15">
        <el-col :span="4">
          <el-form-item label="所属单位:">
            <el-select>
              <el-option></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="维护班组:">
            <el-select>
              <el-option></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="电压等级:">
            <el-select>
              <el-option></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="变电站:">
            <el-select>
              <el-option></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="区域/房间:">
            <el-input class="input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="所属子系统:">
            <el-select placeholder="消防系统">
              <el-option></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="设备名称:">
            <el-input class="input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否报警:">
            <el-select placeholder="全部">
              <el-option></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="12" class="endbox">
          <el-button type="primary">查询</el-button>
          <el-button type="primary">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- table表格 -->
    <div class="bigTableStyle">
      <el-table :data="tableData1" border height="500">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="dw" label="所属单位"></el-table-column>
        <el-table-column prop="wh" label="维护班组"></el-table-column>
        <el-table-column prop="dj" label="电压等级"></el-table-column>
        <el-table-column prop="dz" label="变电站"></el-table-column>
        <el-table-column prop="floor" label="区域/房间"></el-table-column>
        <el-table-column prop="sxt" label="所属子系统"></el-table-column>
        <el-table-column prop="ch" label="序设备名称号"></el-table-column>
        <el-table-column prop="bj" label="是否报警"></el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        :current-page="1"
        :page-sizes="100"
        :page-size="[10,20,30,50,100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import lodash from "lodash";
import { GetSocketModule } from "@/store/modules/GetSocketData";

@Component
export default class extends Vue {
  // public tableData: any = [
  //   {
  //     dw: "供电公司",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司1",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  //   {
  //     dw: "供电公司2",
  //     wh: "变电运维",
  //     dj: "交流221kv",
  //     dz: "变电站",
  //     floor: "蓄电池",
  //     sxt: "消防系统",
  //     ch: "探测器",
  //     bj: "否",
  //   },
  // ];
  get tableData1() {
    let newData = [];
    let allData = GetSocketModule.getterAllAuxiliaryByStationId;
    console.log(allData);
    return newData;
  }
  eacharData = [
    {
      name: "消防系统",
      value1: 500,
      value2: 460,
    },
    {
      name: "安防系统",
      value1: 150,
      value2: 60,
    },
    {
      name: "照明系统",
      value1: 50,
      value2: 610,
    },
    {
      name: "环境监测",
      value1: 450,
      value2: 600,
    },
    {
      name: "在线监测",
      value1: 510,
      value2: 60,
    },
  ];
  option = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 10,
      top: 40,
      containLabel: true,
    },

    xAxis: {
      type: "category",
      data: [],
      axisLine: {
        lineStyle: {
          color: "rgba(12, 175, 232,0.8)",
        },
      },
      axisLabel: {
        interval: 0,
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "数量（条）",
      nameTextStyle: {
        color: "#fff",
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(12, 175, 232,0.8)",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: "bar",
        // name:'正常',
        barMaxWidth: "50",
        barGap: 0, //柱间距离
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#38F7F2",
              },
              {
                offset: 1,
                color: "#264C9C",
              },
            ],
          },
        },
        data: [],
      },
      {
        type: "bar",
        // name:'异常',
        barMaxWidth: "50",
        barGap: 0, //柱间距离
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FF8E1C",
              },
              {
                offset: 1,
                color: "#8E4B07",
              },
            ],
          },
        },
        data: [],
      },
    ],
  };
  mounted() {
    this.setTimer();
  }
  beforeDestroy() {
    this.clearTimer();
  }
  timer = null;
  setTimer() {
    this.clearTimer();
    this.timer = window.setInterval(() => {
      this.eacharData.forEach((v) => {
        v.value1 = Math.round(Math.random() * 100);
        v.value2 = Math.round(Math.random() * 100);
      });
    }, 2000);
  }
  clearTimer() {
    if (this.timer) {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  }
  get newOption() {
    let option = lodash.cloneDeep(this.option);
    let xAxis = [];
    let totalList = [];
    let errList = [];
    this.eacharData.forEach((v) => {
      xAxis.push(v.name);
      totalList.push(v.value1);
      errList.push(v.value2);
    });
    option.xAxis.data = xAxis;
    option.series[0].data = totalList;
    option.series[1].data = errList;
    return option;
  }
}
</script>

<style lang="scss" scoped>
.test {
  padding: 0 0.2rem 0.2rem;
  width: 100%;
  height: 100%;
  .title {
    display: flex;
    justify-content: space-between;
    padding: 0 0.3rem;
    .left {
      .el-icon-document-copy {
        margin-right: 0.1rem;
      }
    }
    .back {
      width: 0.9rem;
      height: 0.3rem;
      background: url(../../../assets/img/return.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .echarts {
    width: 100%;
    height: 156px;
    // background-color: blue;
  }
  .el-input__inner {
    width: 100px;
    height: 28px;
  }
}
.form {
  padding: 0.15rem;
  .el-select {
    width: 1.5rem;
  }
  .input {
    width: 1.5rem;
  }
  .endbox {
    display: flex;
    .el-button {
      flex: 1;
      width: 0.1rem;
    }
    .el-button--primary {
      width: 0.1rem;
    }
  }
}
.page {
  margin-top: 10px;
  text-align: center;
}
</style>

